<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Ext Core 4 Class Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            pre { border: 1px gray solid; padding: 5px; margin-top: 30px; }
        </style>

        <script type="text/javascript" src="../src/Ext.js"></script>
        <script type="text/javascript" src="../src/version/Version.js"></script>
        <script type="text/javascript" src="../src/lang/String.js"></script>
        <script type="text/javascript" src="../src/lang/Array.js"></script>
        <script type="text/javascript" src="../src/lang/Number.js"></script>
        <script type="text/javascript" src="../src/lang/Date.js"></script>
        <script type="text/javascript" src="../src/lang/Object.js"></script>
        <script type="text/javascript" src="../src/lang/Function.js"></script>
        <script type="text/javascript" src="../src/class/Base.js"></script>
        <script type="text/javascript" src="../src/class/Class.js"></script>
        <script type="text/javascript" src="../src/class/ClassManager.js"></script>
        <script type="text/javascript" src="../src/class/Loader.js"></script>
        <script type="text/javascript" src="../src/lang/Error.js"></script>
        <script>
            Ext.Loader.setConfig({
                enabled: true,
                paths: {
                    'Sample': 'src/Sample'
                }
            });
        </script>
        <script>
            var sources = {};

            function storeCode() {
                var i = 0,
                    name,
                    pre;

                while (++i) {
                    name = 'sample' + i;
                    pre = document.getElementById(name);

                    if (!pre) {
                        break;
                    }

                    sources[name] = pre.innerHTML;
                }
            }

            function run(id) {
                eval(sources[id]);
            }
        </script>
    </head>
    <body onload="storeCode();">
        <pre id="sample1">
Ext.require('Sample.Person', function() {
    var aaron = new Sample.Person({
        name: 'Aaron Conran',
        gender: 'male',
        isCool: true
    });

    alert(aaron.getName()); // 'Aaron Conran'
    alert(aaron.getGender()); // 'male'
    alert(aaron.getIsCool()); // true

    aaron.eat("Salad"); // alerts "I'm eating: Salad"

    aaron.setGender('weird');
    alert(aaron.getGender()); // 'unknown'
});
        </pre>
        <p>
            <button onclick="run('sample1')">Run Code</button>
        </p>

        <pre id="sample2">
Ext.require('Sample.Developer', function() {
    var tommy = new Sample.Developer({
        name: 'Tommy Maintz',
        languages: ['PHP', 'JavaScript', 'HTML', 'CSS']
    });

    tommy.code('Objective-C'); // alerts "I can't code in: Objective-C"
    tommy.code('JavaScript'); // alerts "I'm coding in: JavaScript"
                              // alerts "I'm eating: Bugs"
});
        </pre>
        <p>
            <button onclick="run('sample2')">Run Code</button>
        </p>

        <pre id="sample3">
Ext.require('Sample.Musician', function() {
    var dave = new Sample.Musician({
        name: 'David Kaneda',
        isCool: true
    });

    dave.composeSongs(); // alerts "David Kaneda is composing songs"
    dave.playGuitar(); // alerts "David Kaneda is playing guitar"

    var anotherDave = Sample.Musician.clone(dave);
    alert(anotherDave.getName()); // alerts "David Kaneda"
});
        </pre>
        <p>
            <button onclick="run('sample3')">Run Code</button>
        </p>

        <pre id="sample4">
Ext.require('Sample.CoolGuy', function() {
    var jacky = new Sample.CoolGuy({
        name: 'Jacky Nguyen',
        isCool: true
    });

    jacky.playGuitar(); // alerts "Jacky Nguyen is playing guitar"
    jacky.sing("Love Me or Die"); // alerts "Ahem..."
                                  // alerts "I'm singing: Love Me or Die"
});
        </pre>
        <p>
            <button onclick="run('sample4')">Run Code</button>
        </p>

        <pre id="sample5">
Ext.require(['Sample.Developer', 'Sample.HumanResource'], function() {
    var jacky = new Sample.Developer({
            name: 'Jacky Nguyen',
            languages: ['PHP', 'JavaScript', 'HTML', 'CSS']
        }),
        noobie = new Sample.Developer({
            name: 'Noobie Dumb',
            languages: ['LameScript']
        }),
        hr = Sample.HumanResource;

    hr.recruit(noobie); // alerts "Noobie Dumb doesn't know JavaScript, no point recruiting!"
    hr.recruit(jacky);

    alert(hr.getDevelopersCount()); // alerts 1
});
        </pre>
        <p>
            <button onclick="run('sample5')">Run Code</button>
        </p>

        <pre id="sample6">
Ext.require(['Sample.deadlock.A'], function() {
    // should throw Error
});
        </pre>
        <p>
            <button onclick="run('sample6')">Run Code</button>
        </p>

        <pre id="sample7">
Ext.require(['Sample.notdeadlock.A'], function() {
    alert("Loading sequence: " + Ext.Loader.history.join(" -> "));
});
        </pre>
        <p>
            <button onclick="run('sample7')">Run Code</button>
        </p>

        <pre id="sample8">
Ext.require(['Sample.CTO', 'Sample.Developer'], function() {
    var abe = new Sample.CTO();
    alert(abe.isGeek); // alerts true
    alert(abe.isSuperGeek); // alerts true
    alert(abe.getAverageIQ()); // alerts 140
                               // not the current class

    var ape = abe.clone();
    alert(Ext.getClassName(ape)); // alerts 'Sample.CTO'

    var jacky = new Sample.Developer();
    alert(jacky.getAverageIQ()); // alerts 120

    var jackie = abe.hireNewDeveloperLike(jacky);
    alert(Ext.getClassName(jackie)); // alerts 'Sample.Developer'
});
        </pre>
        <p>
            <button onclick="run('sample8')">Run Code</button>
        </p>

        <pre id="sample9">
Ext.define('My.own.A', {
    statics: {
        myName: 'A'
    },

    constructor: function() {
        alert(this.statics().myName);
        alert(this.self.myName);
    },

    clone: function() {
        var cloned = new this.self();

        cloned.rootName = this.statics().myName;

        return cloned;
    }
});

Ext.define('My.own.B', {
    extend: 'My.own.A',

    statics: {
        myName: 'B'
    },

    clone: function() {
        var cloned = this.callParent();

        cloned.special = true;

        return cloned;
    }
});

var a = new My.own.A(); // alerts 'A' then alerts 'A'
var b = new My.own.B(); // alerts 'A' then alerts 'B'

var aa = a.clone();
var bb = b.clone();

alert(Ext.getClassName(aa)); // alerts 'My.own.A'
alert(Ext.getClassName(bb)); // alerts 'My.own.B'

alert(aa.rootName); // alerts 'A'
alert(bb.rootName); // alerts 'A'
alert(bb.special); // alerts true
        </pre>
        <p>
            <button onclick="run('sample9')">Run Code</button>
        </p>

        <pre id="sample10">
Ext.define('My.Cat', {
    statics: {
        totalCreated: 0,
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        var statics = this.statics();

        alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                                        // equivalent to: My.Cat.speciesName

        alert(this.self.speciesName);   // dependent on 'this'

        statics.totalCreated++;

        return this;
    },

    clone: function() {
        var cloned = new this.self;                      // dependent on 'this'

        cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName

        return cloned;
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',

    statics: {
        speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
    },

    constructor: function() {
        this.callParent();
    }
});

var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'

var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
alert(clone.groupName);                 // alerts 'Cat'

alert(My.Cat.totalCreated);             // alerts 3
        </pre>
        <p>
            <button onclick="run('sample10')">Run Code</button>
        </p>

        <pre id="sample11">
Ext.define('Bank', {
    money: '$$$',
    printMoney: function() {
        alert('$$$$$$$');
    }
});

Ext.define('Thief', {});

Thief.borrow(Bank, ['money', 'printMoney']);

var jacky = new Thief();

alert(jacky.money); // alerts '$$$'
jacky.printMoney(); // alerts '$$$$$$$'
        </pre>
        <p>
            <button onclick="run('sample11')">Run Code</button>
        </p>
    </body>
</html>
